<template>
	<van-field
		name="checkboxGroup"
		:label="label"
		:placeholder="placeholderText"
		:required="required"
		:input-align="iptAlign"
		:rules="rules"
	>
		<template #input>
			<van-checkbox-group
				@change="changeValue"
				:disabled="disabled"
				v-model="defaultValue"
				:direction="direction"
				:key="keyValue"
			>
				<van-checkbox
					v-for="(item, i) in objList"
					:key="i"
					:name="item.code"
					:disabled="item.disabled"
					shape="square"
					>{{ item.name }}</van-checkbox
				>
			</van-checkbox-group>
		</template>
	</van-field>
</template>

<script>
// 复选框组件 支持回显 多选 限制选择数量
import { mapGetters } from 'vuex'
import { Checkbox, CheckboxGroup } from 'vant';
export default {
	name: 'commonSelect',
	props: {
		// 字典code
		code: {
			require: true,
			default: 'JGLX'
		},
		// 标题
		label: {
			require: true
		},
		// 是否必填
		required: {
			require: false,
			default: false
		},
		// 回显值
		value: {
			require: false
		},
		// 占位文字
		placeholderText: {
			require: false,
			default: '请选择'
		},
		// 输入框位置
		iptAlign: {
			require: false,
			default: 'left'
		},
		disabled: {
			require: false,
			default: false
		},
		// 排列方式  水平horizontal  垂直vertical
		direction: {
			type: String,
			default: 'horizontal'
		},
		disabledItem: {
			type: [String, Number]
		},
		rules: {
			type: Array,
			default() {
				return [{ required: false, message: '请选择' }]
			}
		},
	},
	components: {
		'van-checkbox':Checkbox,
		'van-checkbox-group':CheckboxGroup,
	},
	data() {
		return {
			keyValue: new Date().getTime(),
			defaultValue: []
		}
	},
	computed: {
		...mapGetters(['dictList']),
		objList() {
			let target = this.dictList.find((item) => item.code == this.code)
			let arr = []
			if (target && target.children.length > 0) {
				target.children.forEach((item) => {
					arr.push({ name: item.name, code: item.code, disabled: false })
				})
			}
			return arr
		}
	},
	created() {
		if (this.value) {
			this.defaultValue = this.value.split(',')
			if (this.disabledItem) {
				let res = this.defaultValue.findIndex((item) => {
					return item == this.disabledItem
				})
				if (res != -1) {
					for (let i = 0; i < this.objList.length; i++) {
						if (this.objList[i].code == this.disabledItem) {
							this.objList[i].disabled = false
						} else {
							this.objList[i].disabled = true
						}
					}
				} else {
					for (let i = 0; i < this.objList.length; i++) {
						if (this.objList[i].code == this.disabledItem) {
							this.objList[i].disabled = true
						} else {
							this.objList[i].disabled = false
						}
					}
				}
			}
		}

		// this.defaultValue = this.value
	},
	methods: {
		changeValue(value) {
			console.log(value)
			if (value && value.length > 0) {
				let res = value.findIndex((item) => {
					return item == this.disabledItem
				})
				if (res != -1) {
					if (this.disabledItem) {
						for (let i = 0; i < this.objList.length; i++) {
							if (this.objList[i].code == this.disabledItem) {
								this.objList[i].disabled = false
							} else {
								this.objList[i].disabled = true
							}
						}
					}
				} else {
					for (let i = 0; i < this.objList.length; i++) {
						if (this.objList[i].code == this.disabledItem) {
							this.objList[i].disabled = true
						} else {
							this.objList[i].disabled = false
						}
					}
				}
			} else {
				for (let i = 0; i < this.objList.length; i++) {
					this.objList[i].disabled = false
				}
			}

			let str = ''
			for (let i = 0; i < value.length; i++) {
				str += value[i] + ','
			}
			let str2 = str.substring(0, str.length - 1)
			this.$emit('update:value', str2)
			this.$emit('sureSelect', str2)
			console.log(this.objList)
			this.keyValue = new Date().getTime()
		}
	}
}
</script>
<style lang="less" scoped>
.van-checkbox {
	margin-bottom: 10px;
}
</style>
